<template>
	<view>
		<uni-search-bar class="order-input" bgColor="#fff" v-model="ordersn" radius="30" placeholder="输入订单号查询" clearButton="auto" cancelButton="none" @confirm="getInfo"/>
		<view class="order-info" v-show="info.ordersn">
			<view class="flex_align_center">订单类型：<view class="order-status">{{info.ordertype}}</view></view>
			<view class="flex_align_center">订单状态：<view class="order-status order-status2">{{info.status}}</view></view>
			<view>订单编号：{{info.ordersn}}</view>
			<view>支付单号：{{info.pay_ordersn}}</view>
			<view>下单时间：{{info.paytime}}</view>
			<view class="flex_align_center">
				<view class="order-img">
					<img :src="info.thumb" alt="">
				</view>
				<view class="shop-info flex1">
					<view class="clamp2">{{info.goodstitle}}</view>
					<view>数量：{{info.total}}</view>
					<view>实付：￥{{info.price}}</view>
				</view>
			</view>
			<view class="clamp">购买人：{{info.nickname}}</view>
			<view>购买人ID：{{info.mid}}</view>
			<view class="flex_align_center" v-if="info.mobile">购买电话：{{info.mobile}}
				<uni-icons type="phone-filled" color="#333" size="22" @click="phone(info.mobile)"></uni-icons>
			</view>
			<view v-if="info.supname">购买门店：{{info.supname}}</view>
			<view v-if="info.principalname">门店联系人：{{info.principalname}}</view>
			<view class="flex_align_center" v-if="info.principalmobile">门店电话：{{info.principalmobile}}
				<uni-icons type="phone-filled" color="#333" size="22" @click="phone(info.principalmobile)"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordersn: '',
				info: []
			};
		},
		methods: {
			getInfo(){
				if(this.ordersn == '') return this.$api.msg('请输入订单号查询');
				this.$axios('lists/searchorder','POST','order',{
					ordersn: this.ordersn
				}).then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data.list[0];
					}
				})
			},
			phone(v){
				uni.makePhoneCall({
					phoneNumber: v
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8fe;
	}
.uni-searchbar__box{
	height: 100rpx!important;
}
.order-info{
	padding: 20rpx;
	color: #333;
	background: #fff;
	border-radius: 12rpx;
	margin: 20rpx;
	view{
		margin: 16rpx 0;
	}
	.order-status{
		width: 130rpx;
		line-height: 46rpx;
		background: #8615E1;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 0;
	}
	.order-status2{
		background: #49C265;
	}
	.order-img{
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
	.shop-info{
		font-size: 24rpx;
		color: #666;
		margin: 0;
		view{
			margin: 6rpx 0;
		}
		.clamp2{
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
		}
	}
}
</style>
